<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础React测试</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
                'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
                sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        #loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        
        .loading-content {
            text-align: center;
            color: #666;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #1890ff;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        #root {
            min-height: 100vh;
        }
        
        .error-fallback {
            padding: 40px;
            text-align: center;
            font-family: Arial, sans-serif;
            background: #fff2f0;
            border: 1px solid #ffccc7;
            border-radius: 8px;
            margin: 20px;
            color: #ff4d4f;
        }
    </style>
</head>
<body>
    <!-- 加载动画 -->
    <div id="loading">
        <div class="loading-content">
            <div class="spinner"></div>
            <h3>正在加载基础React应用...</h3>
            <p>请稍候，正在初始化组件</p>
        </div>
    </div>
    
    <!-- React应用容器 -->
    <div id="root"></div>
    
    <script>
        console.log('🚀 开始加载基础React测试页面');
        
        // 设置超时回退机制
        setTimeout(() => {
            const loading = document.getElementById('loading');
            if (loading && loading.style.display !== 'none') {
                console.warn('⚠️ React应用加载超时，显示回退内容');
                loading.style.display = 'none';
                
                const root = document.getElementById('root');
                if (root && !root.innerHTML.trim()) {
                    root.innerHTML = `
                        <div class="error-fallback">
                            <h2>⏰ 应用加载超时</h2>
                            <p>React应用可能遇到了问题</p>
                            <p>请检查浏览器控制台获取详细信息</p>
                            <button onclick="window.location.reload()" style="
                                background: #1890ff;
                                color: white;
                                border: none;
                                padding: 10px 20px;
                                border-radius: 4px;
                                cursor: pointer;
                            ">重新加载</button>
                        </div>
                    `;
                }
            }
        }, 10000); // 10秒超时
        
        // 监听React应用加载完成
        window.addEventListener('load', () => {
            console.log('📄 页面资源加载完成');
        });
        
        // 全局错误捕获
        window.addEventListener('error', (event) => {
            console.error('🚨 全局错误:', event.error);
        });
        
        window.addEventListener('unhandledrejection', (event) => {
            console.error('🚨 未处理的Promise拒绝:', event.reason);
        });
    </script>
    
    <!-- 加载基础React应用 -->
    <script type="module" src="/src/main-basic.jsx"></script>
    
    <script>
        // 监听React应用是否成功渲染
        const checkReactApp = () => {
            const root = document.getElementById('root');
            if (root && root.innerHTML.trim()) {
                console.log('✅ 检测到React应用内容，隐藏加载动画');
                const loading = document.getElementById('loading');
                if (loading) {
                    loading.style.display = 'none';
                }
            } else {
                setTimeout(checkReactApp, 100);
            }
        };
        
        setTimeout(checkReactApp, 500);
    </script>
</body>
</html>